<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>员工列表</span>
                </div>
                <el-row>
                    <el-col :span="21">
                        <el-input v-model="queryData.empName" placeholder="请输入员工姓名"></el-input>
                        <el-select v-model="queryData.deptId" placeholder="部门">
                            <el-option
                                    v-for="item in dept"
                                    :key="item.deptId"
                                    :label="item.deptName"
                                    :value="item.deptId">
                            </el-option>
                        </el-select>
                        <el-input v-model="queryData.empJob" placeholder="职务"></el-input>
                        <el-select v-model="queryData.status" placeholder="账号状态">
                            <el-option
                                    v-for="item in statu"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                        <el-button type="primary" @click="queryDataHandle(pagePagination.currentPage,pagePagination.pageSize)">查询</el-button>
<!--                        <el-divider direction="vertical"></el-divider>-->
                        <el-button type="primary" @click="resetQuery">重置</el-button>
                    </el-col>
                    <el-col :span="3">
                        已使用：{{ count.count }}购买数：{{ productNum.productNum }}
                    </el-col>
                </el-row>

                <div style="height: 10px"></div>

                <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}"
                          style="width: 100%">
                    <el-table-column prop="empId" label="empId" v-if="false"></el-table-column>
                    <el-table-column prop="userName" label="员工账号"></el-table-column>
                    <el-table-column prop="empName" label="员工姓名"></el-table-column>
                    <el-table-column prop="gender" label="性别"></el-table-column>
                    <el-table-column prop="deptName" label="部门"></el-table-column>
                    <el-table-column prop="empJob" label="职务"></el-table-column>
                    <el-table-column prop="empPhone" label="手机"></el-table-column>
                    <el-table-column prop="status" label="账号状态"></el-table-column>
                    <el-table-column label="使用权限">
                        <template slot-scope="scope">
                            <el-switch v-if="scope.row.status == '在职'"
                                    v-model="scope.row.loginStatus"
                                    active-color="#13ce66"
                            @change="update(scope.$index, scope.row)">
                            </el-switch>
                            <el-switch v-if="scope.row.status != '在职'"
                                    v-model="scope.row.loginStatus"
                                    :disabled="true">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="interspaceH"></div>

                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
        </div>

        <div v-if="currentPanel == 'view'">
            <Eview :formData="single" @currentHandle="currentHandle"/>
        </div>

        <div v-if="currentPanel == 'edit'">
            <UpdateCen :formData="single" @currentHandle="edit"/>
        </div>
    </div>
</template>

<script>
import Eview from "@/views/emp/view"

export default {
    components: {
        Eview
    },
    data() {
        return {
            dept: [],
            statu: [
                {
                    value: '1',
                    label: '在职'
                },
                {
                    value: '2',
                    label: '已禁用'
                },
                {
                    value: '4',
                    label: '未激活'
                },
                {
                    value: '5',
                    label: '离职'
                }
            ],
            productNum:{},
            count: {},
            dataSource: [],
            id: 0,
            tablePage: 0,
            currentPanel: 'list',
            dictionary: {},
            fieldType: {
                createDate: "datetime"
            },
            queryData: {},
            //分页后列表数据
            pageDataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            single: {},
        }
    },
    mounted() {
        this.queryDataHandle(1, 10);
        //查询部门
        this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
            this.dept = data.rows;
        })
    },
    methods: {
        queryDataHandle(page = 1, row = 10) {
            let emp = {
                pageNum: page,
                pageSize: row,
                empName : this.queryData.empName,
                deptId : this.queryData.deptId,
                empJob : this.queryData.empJob,
                status : this.queryData.status
            }
            let that = this
            that.$request("/api/emp/getList/1_0", emp, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                data.rows.map((item) => {
                    if (item.status == '1'){
                        item['status'] = item.status = "在职"
                    }else if (item.status == '2') {
                        item['status'] = item.status = "已禁用"
                    }else if (item.status == '4') {
                        item['status'] = item.status = "未激活"
                    }else if (item.status == '5') {
                        item['status'] = item.status = "离职"
                    }

                    if (item.status == "在职"){
                        item['loginStatus'] = item.loginStatus == "2" ? true : false
                    }else if (item.status == "已禁用"){
                        item['loginStatus'] = item.loginStatus = false
                    }else if (item.status == "未激活"){
                        item['loginStatus'] = item.loginStatus = false
                    }else if (item.status == "离职"){
                        item['loginStatus'] = item.loginStatus = false
                    }else {
                        item['loginStatus'] = item.loginStatus = false
                    }
                })
                that.dataSource = data.rows
            })
            this.$request("/api/orders/getProductNum/1_0", {}, "POST").then((data) => {
                this.productNum = data.data
            })
            this.$request("/api/scrm/getCount/1_0", {}, "POST").then((data) => {
                this.count = data.data
            })
        },

        update(index, row) {
            if (row.loginStatus == false) {
                this.loginStatus = '1'
            }else if(row.loginStatus == true) {
                this.loginStatus = '2'
            }
            let scrmLogin = {
                empId: row.empId,
                companyId: row.companyId,
                orgId: row.orgId,
                status: this.loginStatus,
                userId: row.userId
            }
            this.$request("/api/scrm/empLoginControll/1_0", scrmLogin, "POST").then((data) => {
                if(data.data==1) {
                    this.$message({
                        message: data.message,
                        type: 'success'
                    });
                    this.queryDataHandle(1, 10);
                }else {
                    this.$message({
                        message: data.message,
                        type: 'error'
                    });
                    this.queryDataHandle(1, 10);
                }
            })
        },
        resetQuery() {
            this.queryData = {}
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        details(row) {
            this.single = row;
            this.currentPanel = 'view';
        },
        currentHandle(e) {
            this.currentPanel = e.currentPanel;
            this.queryDataHandle(1, 10);
        },
        //修改页面
        updateHandle(row) {
            this.single = row;
            this.currentPanel = 'edit';
        },
        //创建规则保存
        addSubmit(e, type) {
            if (type == 'back') {//点击返回直接跳转
                this.currentHandle(e)
            }
            if (e.data != null && e.data != undefined) {
                e.data.createDate = new Date()
                e.data.id = this.dataSource.length
                this.dataSource.push(e.data)
                //如果数据保存成功，跳转
                this.currentHandle(e)
            }
        },
        //修改规则
        edit(e, type) {
            if (type == 'back') {//点击返回直接跳转
                this.currentHandle(e)
            }
            if (e.data != null && e.data != undefined) {
                //如果数据修改成功，跳转
                this.currentHandle(e)
            }
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.box-card .el-select {
    width: 200px;
}

a {
    color: #298bef;
}
</style>
